<template>
  <view class="animated fadeIn faster my-2" style="min-height: 100vh;">

    <view class="searchBox px-2 mx-2 rounded20 d-flex-item d-flex d-flex-middle">
      <input v-model="formData.name" class="pl-1 rounded10 font30 d-flex-item" placeholder="课程名称"
             placeholder-class="colorhold"/>
      <text v-if="formData.name && formData.name.length > 0" class=" text-right iconfont icon-cuo1  ml-1"
            @click="dataCancel"></text>
      <text class="iconfont icon-icon_sousuo main-color font40  text" @click="onSearch"></text>
    </view>

    <view class="px-2">
      <view class="sort-container d-flex d-flex-middle py-2">
        <!-- 综合排序 -->
        <view class="sort-item d-flex d-flex-middle" @click="toggleSort('comprehensive')">
          <text class="font28  font-bold" :class="!formData.sort_by&& !formData.sort_order?'main-color':'hui'">综合</text>
        </view>

        <!-- 观看人数排序 -->
        <view class="ml-4 sort-item d-flex d-flex-middle" @click="toggleSort('view_count')">
          <text class="font28 hui">观看人数</text>
          <view class="triangle-icons d-flex d-flex-column">
            <text class="iconfont   icon-icon_triangle_  rotate180"
                  :class="formData.sort_by == 'view_count'&& formData.sort_order == 'asc' ?'main-color':'hui'"
                  ></text>
            <text class="  iconfont icon-icon_triangle_  "
                  :class="formData.sort_by == 'view_count'&& formData.sort_order == 'desc' ?'main-color':'hui'"
                 ></text>
          </view>
        </view>

        <view class="ml-4 sort-item d-flex d-flex-middle" @click="toggleSort('date')">
          <text class="font28 hui">最新日期</text>
          <view class="triangle-icons d-flex d-flex-column">
            <text class="iconfont   icon-icon_triangle_  rotate180"
                  :class="formData.sort_by == 'date'&& formData.sort_order == 'asc' ?'main-color':'hui'"
                  ></text>
            <text class="  iconfont icon-icon_triangle_  "
                  :class="formData.sort_by == 'date' && formData.sort_order == 'desc' ?'main-color':'hui'"
                 ></text>
          </view>
        </view>
      </view>

      <view class="recommend-grid">
        <view
            v-for="(item, index) in todayRecommende"
            :key="index"
            class="recommend-data-box bg-fff rounded10 d-flex d-flex-column"
            @click="goStudy(item.id)"
        >
          <image
              class="recommend-picture rounded10"
              :src="item.course_image"
              mode="aspectFill"
          ></image>
          <view class="px-1 pt-1 pb-2">
            <text class="font24" style="color: rgba(55, 189, 180, 1)">免费</text>
            <view class="text-clamp font26 color-5C5C5CFF mt-1">{{ item.course_name }}</view>
            <view class="d-flex d-flex-between d-flex-middle mt-1">
              <text class="font20 color-5C5C5CCC">
                <text>{{ item.sort }}</text>
                位同学正在学习
              </text>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载提示 -->
      <view v-if="loadingType == 1" class="loading-text text-center py-2">
        加载中...
      </view>
      <view v-else-if="loadingType == 2 && todayRecommende.length > 0" class="loading-text text-center py-2">
        没有更多数据了
      </view>
    </view>

  </view>
</template>

<script>
import {homeApi} from "@/http/homeApi";
import {mapState} from "vuex"

export default {
  data() {
    return {
      formData: {
        name: '',
        sort_by: '',
        sort_order: '',
        category_id:''
      },
      todayRecommende: [],
      currentPage: 1,
      loadingType: 0,
    }
  },
  computed: {
    ...mapState({
      loginState: state => state.loginState
    })
  },
  onLoad(options) {
    // 获取页面传递的搜索关键词
    if (options && options.keyword) {
      this.formData.name = decodeURIComponent(options.keyword);
    }
    if (options && options.category_id) {
      this.formData.category_id = options.category_id;
    }
    this.goTodayRecommende();
  },
  methods: {
    async goTodayRecommende() {
      let that = this
      that.loadingType = 1
      try {
        let params = {
          keyword: this.formData.name,
          page: this.currentPage,
          sort_by: this.formData.sort_by,
          sort_order: this.formData.sort_order,
          category_id:this.formData.category_id
        }
        let result = await homeApi.getSearch(params);
        if (result.data) {
          that.todayRecommende = that.todayRecommende.concat(result.data)
        }
        if (result.data && result.data.length > 9) {
          that.loadingType = 0
        } else {
          that.loadingType = 2
        }
      } catch (error) {
        that.loadingType = 2
      }
    },
    toggleSort(type) {
      if (type === 'comprehensive') {
        // 综合排序，清除所有排序
        this.formData.sort_by = '';
        this.formData.sort_order = '';
      } else {
        // 实现三态切换：asc -> desc -> clear -> asc...
        if (this.formData.sort_by === type) {
          if (this.formData.sort_order === 'asc') {
            // 第二次点击：改为降序
            this.formData.sort_order = 'desc';
          } else if (this.formData.sort_order === 'desc') {
            // 第三次点击：清除排序
            this.formData.sort_by = '';
            this.formData.sort_order = '';
          }
        } else {
          // 第一次点击：设置为升序
          this.formData.sort_by = type;
          this.formData.sort_order = 'asc';
        }
      }

      // 重新加载数据
      this.currentPage = 1;
      this.todayRecommende = [];
      this.goTodayRecommende();
    },
    onSearch() {
      if (this.formData.name.trim()) {
        // 执行搜索
        this.currentPage = 1;
        this.todayRecommende = [];
        this.goTodayRecommende();
      } else {
        uni.showToast({
          title: '请输入搜索内容',
          icon: 'none'
        });
      }
    },
    dataCancel() {
      // 清空搜索内容
      this.formData.name = '';
      this.currentPage = 1;
      this.todayRecommende = [];
      this.goTodayRecommende();
    },
    goStudy(id) {
      // 跳转到课程详情页
      console.log('去学习课程:', id);
      // 示例跳转
      // uni.navigateTo({
      //   url: `/pages/course/detail?id=${id}`
      // });
    }
  },
  // 加载更多数据
  onReachBottom() {
    console.log('加载更多数据');
    if (this.loadingType == 2 || this.loadingType == 1) {
      return;
    }
    this.currentPage++
    this.goTodayRecommende();
  },
}
</script>

<style scoped>
.recommend-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.recommend-picture {
  height: 334rpx;
}

.color-5C5C5CCC {
  color: #5C5C5CCC;
}


.searchBox {
  background-color: #fff;
  height: 80rpx;
  line-height: 80rpx;
}

.searchBox input {
  height: 100%;
}

.triangle-icons {
  margin-left: -20rpx;
}

.hui {
  color: rgba(143, 146, 161, 1);
}

.icon-icon_triangle_ {
  font-size: 24rpx; /* 增大字体大小以提高兼容性 */
  transform: scale(0.25); /* 通过缩放保持视觉大小一致 */
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.rotate180 {
  transform:scale(0.25) rotate(180deg);
}

</style>
